-
Notifications
You must be signed in to change notification settings - Fork 5
/
DocumentMetadata.svelte
65 lines (54 loc) · 1.42 KB
/
DocumentMetadata.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script lang="ts">
import type { Document } from "$lib/api/types";
import { Clock16, Pencil16 } from "svelte-octicons";
import Action from "$lib/components/common/Action.svelte";
import Flex from "$lib/components/common/Flex.svelte";
import Metadata from "$lib/components/common/Metadata.svelte";
import { canonicalUrl, userOrgString } from "$lib/api/documents";
export let document: Document;
function dateFormat(date: Date | string) {
return new Date(date).toLocaleDateString();
}
// urls
$: edit = new URL("edit/", canonicalUrl(document)).toString();
</script>
<!--
@component
Document metadata:
- title
- description
- contributor
- source
- last modified
- uploaded
-->
<Flex direction="column" gap={1}>
<header>
<h1>
{document.title}
</h1>
{#if document.edit_access}
<Action icon={Pencil16}><a href={edit}>Edit</a></Action>
{/if}
</header>
{#if document.description}
<p class="description">
{document.description}
</p>
{/if}
<Metadata key="Contributed by" value={userOrgString(document)} />
<Flex>
<Metadata key="Last updated on" value={dateFormat(document.updated_at)}
><Clock16 slot="icon" />
</Metadata>
<Metadata key="Created on" value={dateFormat(document.created_at)}
><Clock16 slot="icon" />
</Metadata>
</Flex>
</Flex>
<style>
header h1 {
display: inline;
overflow-wrap: break-word;
}
</style>